<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="虚拟云VPC资源互通"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 创建资源互通弹窗 -->
    <pdlog v-model="showLog" width="441px" title="创建资源互通" @comfirm="showLog = false" @cencel="showLog = false">
      <pform ref="form" :model="form" >
      <el-form-item label="名称">
        <el-input style="width:233px;"  v-model="form.field1" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="对端项目">
        <el-select class="w233" v-model="form.field2" placeholder="请选择项目ID">
          <el-option label="qa-sdhdsf-2" value="1"></el-option>
          <el-option label="ds-3fdjhfs-3" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对端VPC">
        <el-select class="w233" v-model="form.field3" placeholder="请选择虚拟云名称">
          <el-option label="qa-sdhdsf-2" value="1"></el-option>
          <el-option label="ds-3fdjhfs-3" value="2"></el-option>
        </el-select>
      </el-form-item>
    </pform>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getNetworkVpc} from '@/api/pageList'
  
  export default {
    data() {
      return {
        form:{
          field1:'',
          field2:'',
          field3:'',
        },
        tipName:'',
        showTip:false,
        addBtnList:[{
            id:1,
            name:'创建资源互通',
            handle:this.handleLog
          }],
        btnList:[
          {
            id:1,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        editValue2: null, // 编辑值
        showeditValue2:false,
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "id",
            label: "ID",
          },
          {
            field: "status",
            label: "状态",

          },
          
          {
            field: "num_subnets",
            label: "对端项目ID",
            sortable: true

          },
          {
            field: "server_num",
            label: "对端VPC",
            sortable: true
          },
          {
            field: "server_num",
            label: "对端VPC网段",
            sortable: true
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
        // 请求
        getNetworkVpc().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      handleAdd() {
        console.log('跳转新增页');
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    min-height: 86px;
    margin: 0px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 20px;
    }
    .el-input {
      width: 233px;
    }
  }
</style>
